<template>
	<view :class="currentTheme">
		<a-nabbar name="剧本商城" />
		<view class="u-flex u-padding-32" >
			<view class="u-flex-1">
				<item-search placeholder="请输入剧本名或发行名" @change="downCallback" v-model="form.name"></item-search>
		  </view>
			<view class="u-padding-left-36" @click="showSearchBox">
				<u-icon name="fenlei1" custom-prefix="custom-icon" color="#333333" size="46"></u-icon>
			</view>
		</view>
		<mescroll-body  @init="mescrollInit"  @down="downCallback"  @up="upCallback" :up="upOption" @emptyclick="feedBack">
			<eimlFlowLayout :list="dataList" v-if="dataList.length" :columnNum="2" @goPathDetail="goPathDetail"/>
		</mescroll-body>
		<!-- 筛选条件弹出层 -->
		<u-popup mode="bottom" v-model="show" borderRadius="26">
			<view class="pop-title u-text-center u-font-36 box-title text-bold">筛选</view>
			<view class="u-padding-left-32 u-padding-right-32">
				<scroll-view scroll-y="true" style="height: 50vh;width: 100%;">
					<view v-for="(item, index) in selectList" :key="index">
						<view class="u-font-32 box-title search-item-title text-bold">{{item.cateName}}</view>
						<view class="search-container">
							<view class="time-list" >
								<u-row  gutter="40" >
									<u-col :span="4" v-for="(val,i) in item.children" :key="i">
										<view class="u-text-center time-item u-margin-top-30"  :class="{'time-item-active':item.checked.includes(val.id)}" @click="selectItem(item,val)">{{val.cateName}}</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="search-box-btns u-flex">
					<view class="reset-btn search-btn u-flex-1 u-font-32 box-title text-bold" @click="resetBtn">
						重置
					</view>
					<view class="confirm-btn search-btn u-flex-1 u-font-32 text-white text-bold" @click="category">完成</view>
				</view>
			</view>
		</u-popup>
		<!-- 购物车 -->
		<view class="car" @click="goCar" v-if="loginForm.uid">
			<u-badge type="error" :count="count" size="mini" :offset="[-5,50]">
			</u-badge>
			<view class="u-margin-left-20 u-margin-top-5">
				<u-icon name="gouwuche" custom-prefix="custom-icon" color="white" size="40"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import upCallback from '@/mixins/upCallbackMixin.js'
	import {deleteIds,getDetail,add} from '@/api/crud.js'
	import searchMixins from '@/mixins/searchMixins.js'
	import settlement from '@/mixins/settlement.js'
	import itemSearch from '@/components/itemSearch/itemSearch.vue';
	import eimlFlowLayout from './eiml-flow-layout.vue'

	export default {
		components: {
			itemSearch,
			eimlFlowLayout
		},
		mixins:[upCallback,searchMixins,settlement],
		data() {
			return {	
				itemStyle:{
					color:'#B0B2D8'
				},
				apiModule:'shopApi',
				form:{
					types: '',
					categoryIds:[],
					name:''
				},
				apiType:"mallProduct",
				name:'thirdQuery',
				title:'商城管理',
				option:{},
				count:0,
				searchPopFlag:false,
				maskClickFlag:true
			}
		},
		watch:{
			// 监听页面剧本列表数据
			dataList(val){
				if(val.length <= 0) {
					this.$u.toast('暂无相关内容')
				}
			}
		},
		computed: {
			upOption(){
				return {
					// empty:{
					// 	tip:'没有找到想要的剧本/发行？',
					// 	btnText :'去反馈'
					// }
				}
			}
		},
		onLoad(option) {
			this.option = {type:option.type};
			
		},
		onShow() {
			//获取购物车总数
			this.loginForm.uid&&this.carCount()
		},
		methods: {
			dataListCallBack(){
				this.dataList = this.dataList.map(val=>{
					const category = val.categoryDescription
					if(!Array.isArray(category)) val.categoryDescription = category ? category.split(',') : [];
					const tagImage = {
						'城限': 'cx',
						'独家': 'dj',
					}[val.issueModeName]
					if(tagImage){
						val.tagImage = `https://larp-gbo.oss-cn-chengdu.aliyuncs.com/wx/${tagImage}.png`
					}
					return val
				})
			},
			//点击反馈
			feedBack(){
				this.$u.route({
					url:'/pagesA/storeAddLarp/feedbackLarp'
				})
				this.form.name = ''
			},
			//获取购物车总数
			carCount(){
				getDetail({uid:this.loginForm.uid},'cart',this.apiModule,'list').then(res=>this.count = res.length)
			},
			addLarp() {
				this.$u.route({
					url:'/pagesA/goodsManager/addLarp',
					params:this.option
				})
			},
			goPathDetail(id){
				this.$u.route({
					url:'/pagesA/itemDetail/goodsDetail',
					params:{
						id
					}
				})
			},
			goCar(){
				this.$u.route({
					url:'/pagesA/car/car'
				})
			},
			//添加到购物车
			addCar(item){
				this.loginValidate().then(res=>{
					add({productId:item.productId,uid:this.loginForm.uid,cartNum:1,mallProductId:item.id,type:'script'},'cart',this.apiModule).then(res=>{
						this.$u.toast('添加成功')
						this.carCount()
					})
				})
			},
			buy(item){
				this.loginValidate().then(res=>{
					this.settlement([{
						productId:item.productId,
						mallProductId:item.id,
						productNum:1
					}])
				})
			},
			getIssue({uid}){
				this.$u.route({
					url:'/pagesA/issueDetail/issueDetail',
					params:{uid}
				})
			},
			//确认筛选条件
			confirmSearch(){
				this.searchPopFlag = false;
			},
			// 重置
			resetTime(){
				this.searchPopFlag = false;
			},
			showSearchBox(){
				this.show = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/pages/pageStyle.scss';
	.btn-style{
		border-radius: 50rpx;
		line-height: 64rpx;
		width: 190rpx;
		text-align: center;
		font-size: 24rpx;
		&.buy{
			color: white;
			background-color: $primary;
		}
		&.add-car{
			margin-right: 20rpx;
			color: #1F1B34;
			background-color: var(--background-second-color);
		}
	}
	.car{
		position: fixed;
		bottom: 200rpx;
		right: 0;
		z-index: 55;
		width: 74rpx;
		height: 56rpx;
		background: $primary;
		border-radius: 50rpx 0 0 50rpx ;
	}
	.item-content-width{
		display: inline-block;
		width: 180rpx;
	}
	.pop-title{
		line-height: 104rpx;
	}
	.time-list{
		padding: 0 24rpx 24rpx 24rpx;
		.time-item{
			height: 64rpx;
			background-color:var(--background-three-color) ;
			color:var(--reversal-color);
			text-align: center;
			line-height: 64rpx;
			border-radius: 32rpx;
			border:1px solid var(--line-color);
			&-active{
				color: var(--background-three-color);
				background-color:var(--theme-color) ;
				border:1px solid var(--theme-color);
			}
		}
	}
	.search-box-btns{
		margin-bottom: 60rpx;
		.search-btn{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.reset-btn{
			background: var(--background-second-color);
			border-radius: 44rpx 0 0 44rpx;
		}
		.confirm-btn{
			background: var(--theme-color);
			border-radius: 0 44rpx 44rpx 0;
		}
	}
</style>
